<style lang="less" scoped>
@import "./index.less";
</style>

<template>
  <div class="login" :style="loginStyle">
    <slot>
      <div class="login-con">
        <div  :bordered="false">
<!--          <p slot="title">-->
<!--            <Icon :type="titleIcon"></Icon>-->
<!--            {{ title }}-->
<!--          </p>-->
          <div
            slot="extra"
            @click="switchOpen = !switchOpen"
            class="switch-butten"
            v-if="openQrcodeLogin"
          >
            <Icon type="ios-loop-strong"></Icon>
            {{ showSwitchName }}
          </div>
          <div class="form-con" v-show="switchOpen">
            <login-form
              ref="loginform"
              :picUrl="picUrl"
              :slideverify="slideverify"
              @on-success-valid="handleSubmit"
            ></login-form>
            <div style="font-size: 12px">
              <span style="color: #974C4C">主办单位：</span>
              <span style="color: #393939">
                沈阳市民政局
              </span>
              <span style="color: #974C4C;margin: 0 2px" >
                |
              </span>
              <span style="color: #974C4C">技术支持：</span>
              <span style="color: #393939">
                沈阳市信息中心
              </span>
            </div>
<!--            <p class="login-tip">{{ desc }}</p>-->
          </div>
          <div class="show-qrcode-login" v-show="!switchOpen">
            <qrcode-form
              ref="qrcodeForm"
              :open-qrcode="switchOpen"
              @qrcodeSuccess="qrcodeSuccess"
            ></qrcode-form>
            <div class="qrcode-tip">请使用微信/盛事通app扫描二维码</div>
          </div>
        </div>
      </div>
    </slot>
    <Modal
      title="强制修改密码"
      v-model="show"
      style="width: 80%"
      :closable="false"
      :mask-closable="false"
    >
      <wl-update-password-login
        :show="show"
        :userName="userName"
        @updateResult="change"
      ></wl-update-password-login>
      <!-- <wl-update-password @updateResult="change"></wl-update-password> -->
      <div slot="footer"></div>
    </Modal>
  </div>
</template>

<script>
import { getLoginType } from '../api/user'
import LoginForm from './login-form'
import { mapActions } from 'vuex'
// import { GetOaNotifyRecordList } from '../../api/notice'
import QrcodeForm from './qrcode-form'

export default {
  name: 'HdLogin',
  components: {
    QrcodeForm,
    LoginForm
  },
  props: {
    loginStyle: {
      type: Object,
      default: () => {
        return {
          backgroundImage:
            'url(https://skv4.oss-cn-hangzhou.aliyuncs.com/avatar/login-bg.jpg)'
        }
      }
    },
    title: {
      type: String,
      default: () => {
        return '欢迎登录'
      }
    },
    desc: {
      type: String,
      default: () => {
        return '请输入用户名和密码'
      }
    },
    fun: {
      type: Function,
      default: () => {
        return true
        // return () => {
        //   return true
        // }
      }
    },
    noticeShow: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    loginUrl: {
      type: String,
      default: () => {
        // return '/api/uc/sc/loginService/userLogin'
        return '/api/uc/sc/loginService/userLogin_encrypt'
      }
    },
    picUrl: {
      type: String,
      default: () => {
        return '/api/uc/sc/loginService/genVerifyCode'
      }
    },
    titleIcon: {
      type: String,
      default: () => {
        return 'ios-cog-outline'
      }
    },
    openQrcodeLogin: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      phoneLogin: false,
      emailLogin: false,
      slideverify: false,
      show: false,
      userName: '',
      switchOpen: true
    }
  },
  async beforeMount () {
    let result = await getLoginType()

    if (result.data && result.data.data) {
      // 暂时先放这
      if (result.data.data.email === 'true') {
        this.emailLogin = true
      }
      if (result.data.data.phone === 'true') {
        this.phoneLogin = true
      }
      // 滑块验证码
      if (result.data.data.SlidingBlockCaptcha === 'true') {
        this.slideverify = true
      }
    }
  },
  computed: {
    showSwitchName () {
      if (this.switchOpen) {
        return '扫码登录'
      } else {
        return '账号密码登录'
      }
    }
  },
  methods: {
    ...mapActions([
      'handleLogin',
      // 'getMenuHeaderListData',
      'setDotShow',
      'setNoticeMiniShow',
      'handQrcodeLogin'
    ]),
    // 'setLoginState',
    change (e) {
      if (e === 1) {
        this.show = false
        // 应该刷新验证码
        // this.$router.push({
        //   name: 'login'
        // })
        setTimeout(() => {
          location.reload()
        }, 500)
      }
    },
    async handleSubmit ({ userName, password, code }) {
      let url = this.loginUrl
      let res = await this.handleLogin({ userName, password, url, code })
      if (res.errcode === 0) {
        if (res.data.errcode === 0) {
          console.log('登录成功了，进行其他处理吧')
          // this.$Message.success('登录成功')
          // this.getMenuHeaderListData()
          this.getNoticeAction(this.noticeShow)
          // 用于判断是否强制修改密码 去掉
          // this.$store.commit('setLoginState', {
          //   isForcePasswordChange: res.isForcePasswordChange,
          //   passwordEncrypt: res.passwordEncrypt
          // })
          if (typeof this.fun === 'function') {
            // this.fun().then(res => {
            //   if (res === true) {
            //     // this.$tip('登陆成功，但是请修改初始密码！', 'success')
            //     this.$router.push({
            //       name: this.$config.homeName
            //     })
            //   }
            // })

            // fix bug by lmq
            let result = await this.fun()
            if (result === true) {
              this.$router.push({
                name: this.$config.homeName
              })
            }
          } else {
            // this.$tip('登陆成功，但是请修改初始密码！', 'success')
            this.$router.push({
              name: this.$config.homeName
            })
          }
        } else {
          this.$Message.error(res.data.errmsg)
        }
      } else if (res.errcode === 1005) {
        // 强制修改密码
        this.userName = userName // 接口需要用户名
        let msg = '您当前为弱密码,请先进行修改密码'
        if (res.errmsg) {
          msg = res.errmsg
        }
        this.$Message.warning({
          content: msg,
          duration: 3
        })
        this.show = true
      } else if (res.errcode === 9999) {
        // 抛异常
        // 刷新验证码
        this.$refs.loginform.updateCode()
        // 剩余可登录次数为
        // res.data.logincount
        let content = res.errmsg
        if (res.data && res.data.hasOwnProperty('logincount')) {
          content += '，剩余可登录次数为' + res.data.logincount + '次'
        }
        this.$Message.error({
          content,
          duration: 3,
          closable: true
        })
      } else {
        // 刷新验证码
        this.$refs.loginform.updateCode()
        // 剩余可登录次数为
        // res.data.logincount
        let content = res.data.errmsg
        if (res.data && res.data.hasOwnProperty('logincount')) {
          content += '，剩余可登录次数为' + res.data.logincount + '次'
        }
        this.$Message.error({
          content,
          duration: 3,
          closable: true
        })
      }
    },
    async qrcodeSuccess (data) {
      console.log('登录成功了，进行其他处理吧')
      // this.$Message.success('登录成功')
      await this.handQrcodeLogin({ token: data.token })
      // this.getMenuHeaderListData()
      this.getNoticeAction(this.noticeShow)
      if (typeof this.fun === 'function') {
        let result = await this.fun()
        if (result === true) {
          this.$router.push({
            name: this.$config.homeName
          })
        }
      } else {
        this.$router.push({
          name: this.$config.homeName
        })
      }
    },
    getNoticeAction (flag) {
      if (flag) {
        GetOaNotifyRecordList({ read_flag: '0' }).then((ret) => {
          let data = ret.data
          if (data.errcode === 0) {
            this.setDotShow(data.data.length > 0)
            this.setNoticeMiniShow(false)
            if (data.data.length > 0) {
              this.$Notice.info({
                title: '提示',
                desc: '',
                render: (h) => {
                  return h('span', [
                    '您有' + data.data.length + '条通知  ',
                    h(
                      'a',
                      {
                        style: {
                          cursor: 'pointer'
                        },
                        on: {
                          click: () => {
                            this.setNoticeMiniShow(true)
                          }
                        }
                      },
                      '点击查看'
                    )
                  ])
                }
              })
            }
          } else {
            this.$Message.warning(data.errmsg)
          }
        })
      }
    }
  }
}
</script>
